<template>
    <div class="form-page">
        <h1>{{title}}</h1>
        <Form :model="formData" :rules='rules' @submit='submitForm' ref="myForm">
            <FormItem label="姓名" prop="name">
                <Input v-model="formData.name" />
            </FormItem>
            <FormItem label="地址" prop="address">
                <Input v-model="formData.address"  />
            </FormItem>
            <FormItem label="爱好" prop="hobby">
                <CheckBoxGroup v-model="formData.hobby">
                  <CheckBox label="paint" text="绘画"></CheckBox>
                  <CheckBox label="music" text="音乐"></CheckBox>
                  <CheckBox label="games" text="游戏"></CheckBox>
                </CheckBoxGroup>
            </FormItem>
            <FormItem>
                <CheckBox v-model="agree" text="是否同意我们的协议"></CheckBox>
            </FormItem>
             <FormItem>
              <Button type='submit'>submit</Button>
            </FormItem>
            <FormItem>
              <Button type='default' @click="resetFileds">reset</Button>
            </FormItem>
            <!-- 测试组件 -->
            <FormItem>
              <FormItem>
                <TestFind></TestFind>
              </FormItem>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import Form from '../components/Form/Form'
import FormItem from '../components/Form/FormItem'
import Input from '../components/Input'
import Button from '../components/Button'
import CheckBox from '../components/Checkbox/Checkbox'
import CheckBoxGroup from '../components/Checkbox/CheckboxGroup'

import TestFind from '../components/testFindComponent'
import { findComponentDownward, findComponentsDownward } from '../assets/js/findComponent.js'
export default {
  components: { Form, FormItem, Input, Button, TestFind, CheckBox, CheckBoxGroup },
  data () {
    return {
      findKey: false,
      title: 'form-page',
      agree: false,
      formData: {
        name: '',
        address: '',
        hobby: []
      },
      rules: {
        name: [{
          required: true, message: '大哥～你连名字都没有吗？', trigger: 'blur'
        }, {
          max: 5, message: '名字最多5个字', trigger: 'change'
        }],
        address: [{
          required: true, message: '自己住哪都不知道吗？', trigger: 'blur'
        }, {
          min: 4, message: '最少4个字', trigger: 'change'
        }],
        hobby: [{
          required: true, message: '请选择爱好', trigger: 'change', type: 'array'
        }]
      }
    }
  },
  mounted () {
    if (this.findKey) {
      let testFind = findComponentDownward(this, 'testFindCom')
      if (testFind) console.log(testFind)
      let formItemList = findComponentsDownward(this, 'dj-form-item')
      if (formItemList.length) console.log(formItemList)
    }
  },
  methods: {

    submitForm (valid) {
      if (valid) {
        console.log('to do something')
      } else {
        console.log('error')
      }
    },
    resetFileds () {
      this.$refs.myForm.resetFileds()
    }
  }
}
</script>
<style lang="scss" scoped></style>
